<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:jsf="http://xmlns.jcp.org/jsf"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:p="http://primefaces.org/ui">

    <div class="content container">
        <div class="row">
            <div class="col-lg-12">
                <h2 class="page-title">
                    Socios CJava,
                    <small> Perfil</small>
                </h2>
            </div> 
        </div>
        <!-- contenido -->
        <div class="row">
            <div class="row">
                <div class="col-lg-8">
                    <div class="widget">
                        <div class="widget-header">
                            <i class="icon-user"></i>
                            <h3>Perfil de usuario</h3>
                        </div>
                        <div class="widget-content">
                            <div class="body">
                                <h:form id="user-form" class="form-horizontal label-left" >
                                    <!-- cabezera -->
                                    <div class="row">

                                        <div class="col-md-4">
                                            <h:panelGrid id="photoImageUserId">
                                                <div class="text-align-center">
                                                    <h:panelGrid rendered="#{clientBean.businessAssociateLoged.idPerson.photo eq null}">
                                                        <img class="img-circle" src="#{request.contextPath}/resources/thim/images/user_admin.png" alt="64x64" style="height: 112px;"/> 
                                                    </h:panelGrid>
                                                    <h:panelGrid rendered="#{!(clientBean.businessAssociateLoged.idPerson.photo eq null)}">
                                                        <img class="img-circle" src="#{request.contextPath}/resources/files/photo/#{clientBean.businessAssociateLoged.idPerson.photo}" width="140" height="64" alt="64x64" style="height: 112px;"/> 
                                                    </h:panelGrid>
                                                </div>
                                                <div align="left" style="padding-left: 17px;">
                                                    <p:commandLink style="color:blue;" update=":modalchangeImaId"
                                                                   oncomplete="modalchangeIma.show();">
                                                        Cambia tu foto
                                                    </p:commandLink>
                                                </div>
                                            </h:panelGrid>
                                        </div>

                                        <div class="col-md-8">
                                            <h3 class="no-margin">#{clientBean.businessAssociateLoged.idPerson.completeName}</h3>
                                            <address>
                                                <strong>Documento de identidad: </strong>
                                                #{clientBean.businessAssociateLoged.idPerson.dni}
                                                <br />
                                                <strong>e-mail: </strong>
                                                <a href="mailto:">#{clientBean.businessAssociateLoged.idPerson.email}</a>
                                                <br />
                                                <strong>Celular: </strong>
                                                #{clientBean.businessAssociateLoged.idPerson.phone}
                                                <br/>
                                            </address>
                                        </div>
                                    </div>

                                    <!-- para la edición de la cuenta -->
                                    <fieldset>
                                        <legend class="section">Información Personal</legend>
                                        <div class="control-group">
                                            <label class="control-label" for="pat">Ap. Paterno *</label>
                                            <div class="controls form-group">
                                                <p:inputText id="pat" styleClass="col-sm-6 col-xs-12" 
                                                             value="#{clientBean.businessAssociateLoged.idPerson.fatherName}"
                                                             required="true" requiredMessage="Falta Ap. Paterno"/>
                                            </div>
                                        </div>
                                        <div class="control-group">
                                            <label class="control-label" for="mat">Ap. Materno</label>
                                            <div class="controls form-group">
                                                <p:inputText id="mat" required="true" requiredMessage="Falta Ap. Materno"
                                                             value="#{clientBean.businessAssociateLoged.idPerson.motherName}"
                                                             styleClass="col-sm-6 col-xs-12"  />
                                            </div>
                                        </div>
                                        <div class="control-group">
                                            <label class="control-label" for="matx">Nombres</label>
                                            <div class="controls form-group">
                                                <p:inputText id="matx" required="true" requiredMessage="Falta Nombres"
                                                             value="#{clientBean.businessAssociateLoged.idPerson.name}"
                                                             styleClass="col-sm-6 col-xs-12"  />
                                            </div>
                                        </div>
                                        <div class="control-group">
                                            <label class="control-label" for="martx">e-mail</label>
                                            <div class="controls form-group">
                                                <p:inputText id="martx" required="true" requiredMessage="Falta Email"
                                                             value="#{clientBean.businessAssociateLoged.idPerson.email}"
                                                             validatorMessage="Ingrese correctamente su email"
                                                             styleClass="col-sm-6 col-xs-12"  >
                                                    <f:validateRegex
                                                        pattern="^[_A-Za-z0-9-\+]+(\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\.[A-Za-z0-9]+)*(\.[A-Za-z]{2,})$" />
                                                </p:inputText>
                                            </div>
                                        </div>
                                        <div class="control-group">
                                            <label class="control-label" for="marstxd">Celular:</label>
                                            <div class="controls form-group">
                                                <p:inputText id="marstxd"
                                                             value="#{clientBean.businessAssociateLoged.idPerson.phone}"
                                                             styleClass="col-sm-6 col-xs-12"  />

                                            </div>
                                        </div>
                                        <div class="control-group">
                                            <label class="control-label" for="hint-field">
                                                Fecha de
                                                <span class="help-block">cumpleaños</span>
                                            </label>
                                            <div class="controls form-group">
                                                <p:calendar id="marstxa" locale="es" pattern="dd/MM/yyyy"
                                                            value="#{clientBean.businessAssociateLoged.idPerson.birthday}"
                                                            required="true" requiredMessage="Falta Fecha de cumpleaño"
                                                            styleClass="col-sm-6 col-xs-12"  />

                                            </div>
                                        </div>
                                    </fieldset>
                                    <fieldset>
                                        <legend class="section">Información Adicional</legend>
                                        <div class="control-group">
                                            <label class="control-label" for="amarstxd">Teléfono:</label>
                                            <div class="controls form-group">
                                                <p:inputText id="amarstxd"
                                                             value="#{clientBean.businessAssociateLoged.idPerson.phone2}"
                                                             styleClass="col-sm-6 col-xs-12"  />

                                            </div>
                                        </div>
                                        <div class="control-group">
                                            <label class="control-label" for="amarstxda">Centtro Laboral</label>
                                            <div class="controls form-group">
                                                <p:inputText id="amarstxda"
                                                             value="#{clientBean.businessAssociateLoged.idPerson.workingData}"
                                                             styleClass="col-sm-6 col-xs-12"  />

                                            </div>
                                        </div>
                                        <div class="control-group">
                                            <label class="control-label" for="amarstyda">Dirección</label>
                                            <div class="controls form-group">
                                                <p:inputText id="amarstyda"
                                                             value="#{clientBean.businessAssociateLoged.idPerson.addressHome}"
                                                             styleClass="col-sm-6 col-xs-12"  />

                                            </div>
                                        </div>
                                    </fieldset>
                                    <div class="form-actions">
                                        <p:commandButton styleClass="btn btn-default" 
                                                         action="#{clientBean.savePerfil()}"
                                                         value="Guardar Info" update=":contentGlobaPageId">
                                            <f:setPropertyActionListener
                                                target="#{navigatorClientBean.navigationIndexContent}"
                                                value="./pages/client/loged/home.xhtml" />
                                        </p:commandButton>
                                        <p:commandButton styleClass="btn btn-default"
                                                         process="@this" update=":contentGlobaPageId"
                                                         value="Cancelar">
                                            <f:setPropertyActionListener
                                                target="#{navigatorClientBean.navigationIndexContent}"
                                                value="./pages/client/loged/home.xhtml" />
                                        </p:commandButton>
                                    </div>
                                </h:form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <p:dialog modal="true" appendTo="@(body)" id="modalchangeImaId"
              widgetVar="modalchangeIma" header="Sube tu foto" width="400">
        <h:form>
            <h:outputText value="Elije una imagen..." /><br/>
            <p:fileUpload mode="advanced" update=":user-form:photoImageUserId"
                          fileUploadListener="#{clientBean.handleFileUploadPhoto}"
                          oncomplete="modalchangeIma.hide();"
                          auto="true" sizeLimit="100000" allowTypes="/(\.|\/)(gif|jpe?g|png)$/"/>
        </h:form>
    </p:dialog>
</ui:composition>

